<template>
  <div class="timetop">
    <div class="starttime">
      <div style="color: #7a7a7a; margin-bottom: 0.3rem">入住时间</div>
      <div style="color: #00b0b7; font-size: 0.7rem">12月28日</div>
    </div>
    <div class="numtime">
      <div style="color: #7a7a7a">共1晚</div>
      <i class="iconfont icon-changjiantou1 numtimeico"></i>
    </div>
    <div class="starttime">
      <div style="color: #7a7a7a; margin-bottom: 0.3rem">离店时间</div>
      <div style="color: #00b0b7; font-size: 0.7rem">12月29日</div>
    </div>
  </div>

  <!--  数据-->
  <div class="datacon">

     <div class="datapadding">
      <div style="width: 50%; height: 90%; margin-left: 0.2rem; margin-top: 0.2rem">
        <img
          style="width: 100%; height: 100%; border-radius: 1rem"
          src="https://gd-hbimg.huaban.com/17f2a2325d149910d48e216fcbb09bafd496d4583d47d-wIWJfu_fw480webp"
          alt=""/>
      </div>
      <div style="margin-left: 1rem;margin-top: 0.5rem;font-weight: lighter;position: relative">
        <div>舒适家庭房</div>
        <div style="font-size: 10px;margin-top: 0.5rem">
          <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">舒适</span>
          <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">地暖</span>
          <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">温泉</span>
        </div>
        <div style="text-align: left;margin-top: 0.5rem">
          ￥598.00
        </div>
        <!--        星星评分-->
        <div>
          <el-rate
            v-model="starvalue"
            disabled
            show-score
            text-color="red"
          />
        </div>
        <div
          @click="router.push('/admin/buy_room_reservation')"
          style="position: absolute; font-size: 12px ;bottom: 0.8rem;
        border-radius: 0.2rem;
        line-height: 1rem;
        color:white;
        left: 5.6rem;width: 2rem; height: 1rem;background-color: #00b0b7">
          预约
        </div>
      </div>

<!--             <div class="infinite-list-wrapper" style="overflow: auto">-->
<!--          <ul-->
<!--            v-infinite-scroll="load"-->
<!--            class="list"-->
<!--            :infinite-scroll-disabled="disabled"-->
<!--          >-->
<!--            <li v-for="i in count" :key="i" class="list-item">{{ i }}</li>-->
<!--          </ul>-->
<!--               -->
<!--          <p v-if="loading">Loading...</p>-->
<!--          <p v-if="noMore">No more</p>-->
<!--        </div>-->

    </div>
        <div class="datapadding" @click="goromm_detail">
      <div style="width: 50%; height: 90%; margin-left: 0.2rem; margin-top: 0.2rem">
        <img
          style="width: 100%; height: 100%; border-radius: 1rem"
          src="https://gd-hbimg.huaban.com/17f2a2325d149910d48e216fcbb09bafd496d4583d47d-wIWJfu_fw480webp"
          alt=""/>
      </div>
      <div style="margin-left: 1rem;margin-top: 0.5rem;font-weight: lighter;position: relative">
        <div>舒适家庭房</div>
        <div style="font-size: 10px;margin-top: 0.5rem">
          <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">舒适</span>
          <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">地暖</span>
          <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">温泉</span>
        </div>
        <div style="text-align: left;margin-top: 0.5rem">
          ￥598.00
        </div>
        <!--        星星评分-->
        <div>
          <el-rate
            v-model="starvalue"
            disabled
            show-score
            text-color="red"
          />
        </div>
        <div style="position: absolute; font-size: 12px ;bottom: 0.8rem;
        border-radius: 0.2rem;
        line-height: 1rem;
        color:white;
        left: 5.6rem;width: 2rem; height: 1rem;background-color: #00b0b7">
          预约
        </div>
      </div>

<!--             <div class="infinite-list-wrapper" style="overflow: auto">-->
<!--          <ul-->
<!--            v-infinite-scroll="load"-->
<!--            class="list"-->
<!--            :infinite-scroll-disabled="disabled"-->
<!--          >-->
<!--            <li v-for="i in count" :key="i" class="list-item">{{ i }}</li>-->
<!--          </ul>-->
<!--               -->
<!--          <p v-if="loading">Loading...</p>-->
<!--          <p v-if="noMore">No more</p>-->
<!--        </div>-->

    </div>
        <div class="datapadding">
      <div style="width: 50%; height: 90%; margin-left: 0.2rem; margin-top: 0.2rem">
        <img
          style="width: 100%; height: 100%; border-radius: 1rem"
          src="https://gd-hbimg.huaban.com/17f2a2325d149910d48e216fcbb09bafd496d4583d47d-wIWJfu_fw480webp"
          alt=""/>
      </div>
      <div style="margin-left: 1rem;margin-top: 0.5rem;font-weight: lighter;position: relative">
        <div>舒适家庭房</div>
        <div style="font-size: 10px;margin-top: 0.5rem">
          <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">舒适</span>
          <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">地暖</span>
          <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">温泉</span>
        </div>
        <div style="text-align: left;margin-top: 0.5rem">
          ￥598.00
        </div>
        <!--        星星评分-->
        <div>
          <el-rate
            v-model="starvalue"
            disabled
            show-score
            text-color="red"
          />
        </div>
        <div style="position: absolute; font-size: 12px ;bottom: 0.8rem;
        border-radius: 0.2rem;
        line-height: 1rem;
        color:white;
        left: 5.6rem;width: 2rem; height: 1rem;background-color: #00b0b7">
          预约
        </div>
      </div>

<!--             <div class="infinite-list-wrapper" style="overflow: auto">-->
<!--          <ul-->
<!--            v-infinite-scroll="load"-->
<!--            class="list"-->
<!--            :infinite-scroll-disabled="disabled"-->
<!--          >-->
<!--            <li v-for="i in count" :key="i" class="list-item">{{ i }}</li>-->
<!--          </ul>-->
<!--               -->
<!--          <p v-if="loading">Loading...</p>-->
<!--          <p v-if="noMore">No more</p>-->
<!--        </div>-->

    </div>
  </div>

</template>

<script setup>
import {computed, ref} from "vue";
import {useRouter} from "vue-router";

const starvalue = ref(3.5)

// 触底加载
const count = ref(10)
const loading = ref(false)
const noMore = computed(() => count.value >= 20)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
  loading.value = true
  setTimeout(() => {
    count.value += 2
    loading.value = false
  }, 2000)
}
const router=useRouter()
const goromm_detail=()=>{
  router.push('/admin/roomdetails')
}
</script>

<style lang="scss" scoped>
.timetop {
  margin: 0 auto;
  width: 80%;
  height: 3rem;
  display: flex;

  .starttime {
    width: 30%;
    height: 100%;
    font-size: 0.5rem;
  }

  .numtime {
    width: 30%;
    font-size: 0.5rem;

    .numtimeico {
      font-size: 2rem;
      color: #00b0b7;
    }
  }
}

.datacon {
  width: 100%;
  background-color: #e5e5e5;
  overflow: hidden;
font-size: 22px;



  .datapadding {

    overflow: hidden;
    display: flex;
    margin: 0.3rem 0.4rem;
    width: 95%;
    height: 6rem;
    border-radius: 0.5rem;
    background-color: white;
  }
}

.infinite-list-wrapper {
  height: 300px;
  text-align: center;
}

.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}
</style>
